<template>
    <div>
        <el-dialog title="选择图标" :visible.sync="dialogVisible" width="70%" lock-scroll close-on-press-escape>
            <div class="grid">
                <div v-for="item of elementIcons" :key="item">
                    <el-tooltip placement="top" :content="item">
                        <div class="icon-item">
                            <i :class="'el-icon-' + item"/>
                            <span><el-link @click="bctb({item})">{{ item }}</el-link></span>
                        </div>
                    </el-tooltip>
                </div>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    import elementIcons from './element-icons'
    import {jcqxCnzyUpdateTb} from '../../../../api/app/xtgl0301/zygl.js'

    export default {
        name: "iconGnzyDialog",
        data() {
            return {
                gnzyid:'',
                elementIcons,
                dialogVisible:false,
            }
        },
        methods : {
            show(){                                               //显示方法
                this.dialogVisible = true
            },
            hidden(){                                             //隐藏方法
                this.dialogVisible = false
            },
            async bctb(icon) {
                if (icon.item == '无') {
                    icon.item = ''
                }
                let params = {
                    gnzyid : this.gnzyid,
                    tb : icon.item
                }
                let result = await jcqxCnzyUpdateTb(params)

                if (result.code != "200") {
                    this.$message.warning('修改图标失败，失败原因：' + result.data.message);
                } else {
                    this.$message.success('修改图标成功！');
                    this.dialogVisible = false
                    this.$emit('findListGnzy')
                }
            }
        }
    }
</script>

<style scoped>
    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        height: 50vh;
        overflow: auto;
    }

    .icon-item {
        margin: 20px;
        height: 85px;
        text-align: center;
        width: 100px;
        float: left;
        font-size: 30px;
        color: #24292e;
        cursor: pointer;
    }

    span {
        display: block;
        font-size: 16px;
        margin-top: 10px;
    }
</style>